<!--
 * @Author: your name
 * @Date: 2022-04-26 17:07:43
 * @LastEditTime: 2022-04-27 09:49:55
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vite\src\components\cars.vue
-->
<template>
    <div>
        <h1>购物车</h1>
        <ul v-if="carList.length>0">
            <li v-for="item in carList" :key="item.id">
                <span>{{item.title}}：</span>
                <span>单价{{item.price}}--</span>
                <span>数量{{item.nums}}</span>----
            <button @click="addToCar(item.id)">+</button>
            <button @click="cudCar(item.id)">-</button>
            </li>
        </ul>
        <p>总价:{{total}}</p>
    </div>
</template>

<script lang="ts" setup>
import {computed} from "vue"
import {carStore} from "../store/cars"
import {storeToRefs} from 'pinia'
const car = carStore();
const {totalPrice} = storeToRefs(car)
const addToCar =(id:string)=>{
    car.addToCar(id)
}
const cudCar =(id:string)=>{
    car.cudCar(id)
}

const carList = computed(()=>{
    return car.carsList
})
const total = computed(()=>{
    return totalPrice
})

</script>
